<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="search-form isheader" v-if="headerShow">
        <div>
          <a-form size="mini" :model="pageData" layout="inline" v-if="permissionStore.hasPermisson('cgdfs.cx')">
            <a-form-item label="采购单号" label-col-flex="60px">
              <a-input class="bacClass" placeholder="" v-model="pageData.purchaseCode" @press-enter="huiche"
                style="width: 150px" allow-clear />
            </a-form-item>
            <a-form-item label="编制日期" field="purchaseDate" label-col-flex="60px">
              <a-date-picker popup-container="html" class="bacClass" :time-picker-props="{ defaultValue: '00:00:00' }"
                style="width: 150px" format="YYYY-MM-DD" v-model="pageData.beginTime" />至
              <a-date-picker popup-container="html" class="bacClass" :time-picker-props="{ defaultValue: '00:00:00' }"
                style="width: 150px" format="YYYY-MM-DD" v-model="pageData.endTime" />
            </a-form-item>
            <a-form-item label="采购商" label-col-flex="60px">
              <a-input class="bacClass" placeholder="" v-model="pageData.providerName" @press-enter="huiche"
                style="width: 162px" allow-clear />
            </a-form-item>
            <a-form-item label="物料编号" label-col-flex="60px">
              <a-input class="bacClass" placeholder="" v-model="pageData.materialCode" @press-enter="huiche"
                style="width: 150px" allow-clear />
            </a-form-item>
            <a-form-item label="主体" label-col-flex="60px">
              <a-select popup-container="html" class="bacClass" :loading="loading" @search="handleSearchZt"
                v-model="pageData.companyEntity" style="width: 174px" :filter-option="false" allow-search allow-clear
                @focus="focusSelZt">
                <a-option v-for="item in pageData.companyEntityList" :value="item.company_entity">{{
                  item.company_entity
                }}</a-option>
              </a-select>
            </a-form-item>
            <a-form-item label="状态" label-col-flex="60px">
              <a-select popup-container="html" class="bacClass" v-model="pageData.inStockState" style="width: 174px"
                allow-clear>
                <a-option :value="0">未完成</a-option>
                <a-option :value="1">已完成</a-option>
                <a-option :value="2">手工完成</a-option>
              </a-select>
            </a-form-item>
            <a-form-item label="合同号" label-col-flex="60px">
              <a-input class="bacClass" placeholder="" v-model="pageData.orderNo" @press-enter="huiche"
                style="width: 150px" allow-clear />
            </a-form-item>
            <a-form-item label="OA付款/报销单号" label-col-flex="120px">
              <a-input class="bacClass" placeholder="" v-model="pageData.oaCode" @press-enter="huiche"
                style="width: 278px" allow-clear />
            </a-form-item>
            <a-form-item label="是否开票" label-col-flex="60px">
              <a-select popup-container="html" class="bacClass" v-model="pageData.invoicState" style="width: 150px"
                allow-clear>
                <a-option :value="0">否</a-option>
                <a-option :value="1">是</a-option>
              </a-select>
            </a-form-item>
          </a-form>
        </div>
        <div>
          <!-- @dyBoufei="handleClick" -->
          <Toolbar class="gesture" :items="pageData.btnList" @select="selectSh" @export="exports">
          </Toolbar>
        </div>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
      <div class="my-tool-bar"> </div>
    </template>
    <template #pageTabel>
      <a-spin :loading="pageData.pageLoading" tip="加载中" dot style="height: 100%; width: 100%; z-index: 999">
        <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple"
          @grid-ready="gridReady" style="height: 100%" :defaultColDef="defaultColDef" class="ag-theme-alpine"
          :rowData="table.dataList" :columnDefs="tc" :localeText="localeText1" @columnResized="onColumnResized1"
          @columnMoved="onColumnMoved1"></AgGridVuesCopys>
      </a-spin>
    </template>
    <paginationCopys :page-size-options="pagingList1" :total="pagination.total" show-total show-jumper show-page-size
      @change="PageSize" @page-size-change="change1" style="justify-content: center" :page-size="pagination.pageSize"
      :current="pagination.page" />
  </pageTabelLayout>

  <a-drawer ok-text="保存" cancel-text="关闭" :drawer-style="{ zIndex: 999 }" popup-container=".arco-tabs-content"
      height="100%" placement="bottom" :visible="visibles1" unmountOnClose @cancel="visibles1 = false" @ok="isOk1">
      <template #title> 修改采购单 </template>
      <div style="width: 100%; overflow: auto; padding-right: 5px" class="scrollbar">
        <el-scrollbar>
          <a-form ref="formRef" layout="inline" size="mini" :model="dataForm" :label-col-props="{ span: 11 }"
            :wrapper-col-props="{ span: 13 }">
            <a-form-item :style="{ width: '355px' }" label-col-flex="120px" label="主体" field="companyEntity">
              <a-input :style="{ width: '13.5rem' }" v-model="dataForm.companyEntity" disabled class="bacClass" />
            </a-form-item>
            <a-form-item :style="{ width: '355px' }" label-col-flex="120px" label="编制日期" field="purchaseDate" disabled>
              <a-date-picker popup-container="html" style="width: 13.5rem"
                :time-picker-props="{ defaultValue: '00:00:00' }" format="YYYY-MM-DD" v-model="dataForm.purchaseDate"
                class="bacClass" />
            </a-form-item>

            <a-form-item :style="{ width: '355px' }" label-col-flex="120px" label="供应商名称" >
              <a-input :style="{ width: '13.5rem' }" v-model="dataForm.providerName" disabled class="bacClass" />
            </a-form-item>

            <a-form-item :style="{ width: '355px' }" label-col-flex="120px" label="采购类型">
              <a-input :style="{ width: '13.5rem' }" v-model="dataForm.purchaseType" disabled class="bacClass" />
            </a-form-item>

            <a-form-item :style="{ width: '355px' }" label-col-flex="120px" label="采购员" field="createName">
              <a-input :style="{ width: '13.5rem' }" v-model="dataForm.createName" disabled class="bacClass" />
            </a-form-item>

            <a-form-item :style="{ width: '355px' }" label-col-flex="120px" label="结算方式">
              <a-input :style="{ width: '13.5rem' }" v-model="dataForm.settlementType" disabled class="bacClass" />
            </a-form-item>

            <a-form-item :style="{ width: '355px' }" label-col-flex="120px" label="交货方式">
              <a-input :style="{ width: '13.5rem' }" v-model="dataForm.logisticType" disabled class="bacClass" />
            </a-form-item>

            <a-form-item :style="{ width: '355px' }" label-col-flex="120px" label="首交日期">
              <a-date-picker popup-container="html" class="bacClass" style="width: 13.5rem"
                :time-picker-props="{ defaultValue: '00:00:00' }" format="YYYY-MM-DD"
                v-model="dataForm.firstDeliveryDate" disabled/>
            </a-form-item>
            <a-form-item :style="{ width: '355px' }" label-col-flex="120px" label="采购单号">
              <a-input disabled :style="{ width: '13.5rem' }" v-model="dataForm.purchaseCode" class="bacClass" />
            </a-form-item>

            <a-form-item :style="{ width: '355px' }" label-col-flex="120px" label="签订地点" field="signAddress"
              :validate-trigger="['change', 'blur']">
              <a-input class="bacClass" :style="{ width: '13.5rem' }" v-model="dataForm.signAddress" disabled/>
            </a-form-item>

            <a-form-item :style="{ width: '355px' }" label-col-flex="120px" label="制单人" field="createName">
              <a-input disabled :style="{ width: '13.5rem' }" v-model="dataForm.createName" class="bacClass"/>
            </a-form-item>

            <a-form-item :style="{ width: '355px' }" label-col-flex="120px" label="尾交日期">
              <a-date-picker popup-container="html" class="bacClass" style="width: 13.5rem"
                :time-picker-props="{ defaultValue: '00:00:00' }" format="YYYY-MM-DD"
                v-model="dataForm.lastDeliveryDate" disabled/>
            </a-form-item>
            <a-form-item :style="{ width: '355px' }" label-col-flex="120px" label="合同号">
              <a-input class="bacClass" :style="{ width: '13.5rem' }" v-model="dataForm.orderNo"/>
            </a-form-item>
            <a-form-item :style="{ width: '355px' }" label-col-flex="120px" label="币种">
              <a-input class="bacClass" :style="{ width: '13.5rem' }" v-model="dataForm.moneyType" disabled/>
            </a-form-item>
            <a-form-item :style="{ width: '355px' }" label-col-flex="120px" label="结算主体" >
              <a-input class="bacClass" :style="{ width: '13.5rem' }" v-model="dataForm.settlementEntity" disabled/>
            </a-form-item>
            <a-form-item :style="{ width: '355px' }" label="OA付款/报销单号" label-col-flex="120px">
              <a-input class="bacClass" placeholder="" v-model="dataForm.oaCode"
              :style="{ width: '13.5rem' }" allow-clear />
            </a-form-item>
            <a-form-item :style="{ width: '355px' }" label="是否开票" label-col-flex="120px">
              <a-select popup-container="html" class="bacClass" v-model="dataForm.invoicState" :style="{ width: '13.5rem' }"
                allow-clear>
                <a-option :value="0">否</a-option>
                <a-option :value="1">是</a-option>
              </a-select>
            </a-form-item>
            <a-form-item :style="{ width: '1490px' }" label-col-flex="120px" label="备注" field="remark">
              <a-textarea class="bacClass" v-model="dataForm.remark" allow-clear show-word-limit disabled/>
            </a-form-item>
          </a-form>
          <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true"
              rowSelection="multiple" @grid-ready="gridReadysz111" style="height: 430px"
              :defaultColDef="defaultColDef" class="ag-theme-alpine" :rowData="tqDataList"
              :columnDefs="tcsz111" :localeText="localeText1"></AgGridVuesCopys>
        </el-scrollbar>
      </div>
    </a-drawer>
</template>
  
<script setup lang="ts" >
import { reactive, ref, onMounted } from 'vue'
import { post } from '@/api/http'
import { Form, Message, Modal } from '@arco-design/web-vue'
import { useTable, useRowKey, useTableColumn, usePagination, useRowSelection } from '@/hooks/table'
import emitter from '@/hooks/useEventBus'
import PostType from '@/views/organizational/PostType.vue'
import printJS from 'print-js'
import dayjs from 'dayjs'
import XqService from '../orderpurchase/service/xq/index'

import { localeText } from '@/api/aggridZw'
import { pagingList } from '@/api/paging'
import usePermission from '@/store/modules/permission'
import { saveOrUpdateGridState as saveOrUpdateGridState01 } from '@/hooks/useGridState'
import setTableTotalRow from '@/utils/setTableTotalRow.ts'


const { selectedRowKeys, onSelectionChange } = useRowSelection()
const rowKey = useRowKey('id')
const pagination = usePagination(doRefresh)
const table = useTable()
const formRef = ref()
let idDtaDy: any = ref([])
let dataTime = ref([])

function change1(val: any) {
  pagination.pageSize = val
  doRefresh()
}

function PageSize(val: any) {
  pagination.page = val
  doRefresh()
}
const localeText1: any = ref(localeText)

function doRefresh() {
  updateGridState01()
  pageData.pageLoading = true
  post({
    url: 'purchase/PurchaseOrderDetail/getOrderSchedule',
    data: {
      page: pagination.page,
      size: pagination.pageSize,
      purchaseCode: pageData.purchaseCode,
      providerName: pageData.providerName,
      materialCode: pageData.materialCode,
      beginTime: pageData.beginTime,
      endTime: pageData.endTime,
      companyEntity: pageData.companyEntity,
      inStockState: pageData.inStockState === '' ? null : pageData.inStockState,
      orderNo:pageData.orderNo,
      oaCode:pageData.oaCode,
      invoicState:pageData.invoicState,
    },
  })
    .then(({ data, code }: any) => {
      if (code === 200) {
        table.handleSuccess(data.list)
        pagination.setTotalSize(data.total)
        gridOption.value.setRowData(data.list)
        setTableTotalRow(gridOption, data.list, ['price', 'amount', 'taxPrice','taxTotalPrice','notInStockNum','inStockNum','needNum','applyNum'])

      }
    })
    .catch(console.log)
    .finally(() => {
      pageData.pageLoading = false
    })
}
const pagingList1: any = ref(pagingList)
const pageData:any = reactive({
  loading: false,
  showAdd: false,
  sideTitle: '新增产品基础资料',
  dropDownData: '',
  pageLoading: false,
  purchaseCode: '',
  providerName: '',
  materialCode: '',
  beginTime: '',
  endTime: '',
  companyEntity: '',
  companyEntityList: [],
  btnList: [],
  inStockState: null,
  orderNo:''
})
const headerShow = ref<boolean>(true)
const tableColumns = useTableColumn([
  {
    title: '建单日期',
    key: 'purchaseDate',
    dataIndex: 'purchaseDate',
    width: 150,
  },
  // {
  //   title: '物料大类',
  //   key: 'bigClassName',
  //   dataIndex: 'bigClassName',
  //   width: 150,
  // },
  // {
  //   title: '物料中类',
  //   key: 'middleClassName',
  //   dataIndex: 'middleClassName',
  //   width: 150,
  // },
  // {
  //   title: '物料小类',
  //   key: 'subClassName',
  //   dataIndex: 'subClassName',
  //   width: 150,
  // },
  {
    title: '物料编号',
    key: 'materialCode',
    dataIndex: 'materialCode',
    width: 150,
  },
  {
    title: '物料名称',
    key: 'materialName',
    dataIndex: 'materialName',
    width: 150,
  },
  {
    title: '所属区域',
    key: 'district',
    dataIndex: 'district',
    width: 150,
    slotName: 'district',
  },
  {
    title: '位置号',
    key: 'locationMark',
    dataIndex: 'locationMark',
    width: 150,
    slotName: 'locationMark',
  },
  {
    title: '收货公司',
    key: 'deliveryCompany',
    dataIndex: 'deliveryCompany',
    width: 150,
    slotName: 'deliveryCompany',
  },
  {
    title: '收货人',
    key: 'receiver',
    dataIndex: 'receiver',
    width: 150,
    slotName: 'receiver',
  },
  {
    title: '收货地址',
    key: 'deliveryAddress',
    dataIndex: 'deliveryAddress',
    width: 150,
    slotName: 'deliveryAddress',
  },

  {
    title: '是否固资',
    key: 'fixAssetStatus',
    dataIndex: 'fixAssetStatus',
    width: 150,
    slotName: 'fixAssetStatus',
  },
  {
    title: '采购单号',
    key: 'purchaseCode',
    dataIndex: 'purchaseCode',
    slotName: 'purchaseCode',
    width: 180,
  },
  {
    title: '采购数量',
    key: 'purchaseNum',
    dataIndex: 'purchaseNum',
    width: 150,
  },
  {
    title: '不含税单价',
    key: 'price',
    dataIndex: 'price',
    width: 150,
  },
  {
    title: '含税单价',
    key: 'taxPrice',
    dataIndex: 'taxPrice',
    width: 150,
  },
  {
    title: '不含税金额',
    key: 'amount',
    dataIndex: 'amount',
    width: 150,
  },
  {
    title: '含税金额',
    key: 'taxTotalPrice',
    dataIndex: 'taxTotalPrice',
    width: 150,
  },
  {
    title: '采购单位',
    key: 'purchaseUnit',
    dataIndex: 'purchaseUnit',
    width: 150,
  },
  {
    title: '换算比例',
    key: 'convertRate',
    dataIndex: 'convertRate',
    width: 150,
  },
  {
    title: '换算后数量',
    key: 'purchaseNumCon',
    dataIndex: 'purchaseNumCon',
    width: 150,
  },

  {
    title: '入库数量',
    key: 'inStockNum',
    dataIndex: 'inStockNum',
    width: 150,
  },
  {
    title: '主体单位',
    key: 'companyEntity',
    dataIndex: 'companyEntity',
    width: 150,
  },
  {
    title: '结算主体',
    key: 'settlementEntity',
    dataIndex: 'settlementEntity',
    width: 150,
  },
  {
    title: '未入库数量',
    key: 'notInStockNum',
    dataIndex: 'notInStockNum',
    width: 150,
  },
  {
    title: '税号',
    key: 'dutyParagraph',
    dataIndex: 'dutyParagraph',
    width: 150,
  },
  {
    title: '采购公司',
    key: 'useCompanyName',
    dataIndex: 'useCompanyName',
    width: 150,
  },
  {
    title: '采购部门',
    key: 'useDepartment',
    dataIndex: 'useDepartment',
    width: 150,
  },
  {
    title: '换算后单价',
    key: 'price',
    dataIndex: 'price',
    width: 150,
  },
  {
    title: '单位',
    key: 'unit',
    dataIndex: 'unit',
    width: 150,
  },
  {
    title: '品牌',
    key: 'brandName',
    dataIndex: 'brandName',
    width: 150,
  },
  {
    title: '需求单审核时间',
    key: 'needAuditDate',
    dataIndex: 'needAuditDate',
    width: 150,
  },
  {
    title: '需求单数量',
    key: 'needNum',
    dataIndex: 'needNum',
    width: 150,
  },
  {
    title: '申购单审核日期',
    key: 'auditDate',
    dataIndex: 'auditDate',
    width: 150,
  },
  {
    title: '申购单数量',
    key: 'applyNum',
    dataIndex: 'applyNum',
    width: 150,
  },
  {
    title: '采购单审核时间',
    key: 'orderAuditDate',
    dataIndex: 'orderAuditDate',
    width: 150,
  },
  {
    title: '首交日期',
    key: 'firstDeliveryDate',
    dataIndex: 'firstDeliveryDate',
    width: 150,
  },
  {
    title: '尾交日期',
    key: 'lastDeliveryDate',
    dataIndex: 'lastDeliveryDate',
    width: 150,
  },
  {
    title: '实际交货日期',
    key: 'stockInDate',
    dataIndex: 'stockInDate',
    width: 150,
  },
  {
    title: '延期天数',
    key: 'extensionDay',
    dataIndex: 'extensionDay',
    slotName: 'extensionDay',
    width: 150,
  },
  {
    title: '供应商',
    key: 'providerName',
    dataIndex: 'providerName',
    width: 150,
  },
  {
    title: '采购制单人',
    key: 'createName',
    dataIndex: 'createName',
    width: 150,
  },
  {
    title: '合同号',
    key: 'orderNo',
    dataIndex: 'orderNo',
    width: 150,
  },
  {
    title: 'OA付款/报销单号',
    key: 'oaCode',
    dataIndex: 'oaCode',
    width: 150,
  },
  {
    title: '是否开发票',
    key: 'invoicState',
    dataIndex: 'invoicState',
    slotName: 'invoicState',
    width: 150,
  },
  {
    title: '备注',
    key: 'remark',
    dataIndex: 'remark',
    width: 150,
  },
  {
    title: '采购单预警',
    key: 'diffDate',
    dataIndex: 'diffDate',
    slotName: 'diffDate',
    fixed: 'right',
    width: 150,
  },
  {
    title: '状态',
    key: 'infoState',
    dataIndex: 'infoState',
    slotName: 'infoState',
    fixed: 'right',
    width: 150,
  },
])

onMounted(() => {
  emitter.on('PurchaseOrderProgressQuery', () => {
    doRefresh()
  })
})

const dataForm:any = reactive({})

const selectSh = () => {
  pagination.page = 1
  doRefresh()
}

const gridOption = ref()
const colState = ref()
const gridReady = (params: any) => {
  gridOption.value = params.api
  colState.value = params.columnApi
}
const defaultColDef = {
  sortable: true,
  resizable: true,
  filter: true,
}
let tc: any[] = tableColumns.map((o) => {
  let obj = {
    headerName: o.title,
    field: o.key,
    pinned: o['fixed'],
    tooltipField: o.key,
  }
  if (o.slotName === 'infoState') {
    obj['width'] = 100
    obj['filterParams'] = {
      valueFormatter: function (params: any) {
        return params.value == '0'
          ? '未完成'
          : params.value == '1'
            ? '已完成'
            : params.value == '2'
              ? '手工完成'
              : ''
      },
    }
    obj['cellRenderer'] = {
      template: `<el-tag v-if="isDatas.infoState == 0" type="warning">未完成
                        </el-tag>
                        <el-tag v-if="isDatas.infoState == 1" type="success">已完成
                        </el-tag>
                        <el-tag v-if="isDatas.infoState == 2">手工完成
                        </el-tag>
                        `,
      setup(props: any) {
        const isDatas = ref(props.params.data)
        return {
          isDatas,
        }
      },
    }
  }
  if (o.slotName === 'fixAssetStatus') {
    obj['cellRenderer'] = {
      template: `
          
          <el-tag type="warning" class="gesture">{{ isDtas.fixAssetStatus == 0 ? '否' : '是' }}</el-tag>
                    `,
      setup(props: any) {
        const isDtas = ref(props.params.data)
        return {
          isDtas,
        }
      },
    }
    obj['filterParams'] = {
      valueFormatter: function (params: any) {
        return params.value == '0'
          ? '否'
          : params.value == '1'
            ? '是'
            : ''
      },
    }
  }
  if (o.slotName === 'diffDate') {
    obj['width'] = 150
    obj['cellRenderer'] = {
      template: `<span v-if="diffDate>=0" style="color:red;fontSize:16px;">{{diffDate}}天</span>
            <span v-else style="color:red;fontSize:16px;"></span>
            `,
      setup(props: any) {
        return {
          // isDatas: () => {
          //     const startTime = dayjs(props.params.data.purchaseDate)
          //     const endTime = dayjs(); // 当前时间
          //     return endTime.diff(startTime, 'day');
          // },
          diffDate: props.params.data.diffDate,
        }
      },
    }
  }
  if (o.slotName === 'purchaseCode') {
    obj['width'] = 120
    obj['cellRenderer'] = {
      template: `<div @click="clicks" v-if="diffDate >= 0" style="background-color:rgb(246, 57, 57);width:100%;height:100%;color:#409eff">{{purchaseCode}}</div>
               <div @click="clicks" v-else style='color:#409eff'>{{purchaseCode}}</div>
            `,
      setup(props: any) {
        const clicks = ()=>{
          Details(props.params.data.id)
          for(let item in props.params.data){
            dataForm[item] = props.params.data[item]
          }
          visibles1.value = true
        }
        return {
          purchaseCode: props.params.data.purchaseCode,
          diffDate: props.params.data.diffDate,
          clicks
        }
      },
    }
  }
  if (o.slotName === 'extensionDay') {
    obj['width'] = 120
    obj['cellRenderer'] = {
      template: `
      <span v-if="extensionDay>=0" style="color:red;fontSize:16px;">{{extensionDay}}天</span>
            <span v-eles style="color:red;fontSize:16px;"></span>`,
      setup(props: any) {
        return {
          diffDate: props.params.data.extensionDay,
        }
      },
    }
  }
  if (o.slotName === 'invoicState') {
    obj['width'] = 120
    obj['cellRenderer'] = {
      template: `
      <span v-if="params.data.invoicState==0">否</span>
            <span v-eles >是</span>`,
      setup(props: any) {
        return {
        }
      },
    }
  }
  return obj
})
const huiche = () => {
  selectSh()
}
let a = [
  {
    showRowGroup: 'hide_def',
    headerName: '',
    checkboxSelection: true,
    headerCheckboxSelection: true,
    pinned: 'left',
    width: 50,
    resizable: false,
    filter: false,
    sortable: false,
    minWidth: 50,
    maxWidth: 50,
    lockPosition: 'left',
  },
]
tc = a.concat(tc)

// 主体下拉框
const focusSelZt = () => {
  handleSearchZt('')
}
const handleSearchZt = (value: any) => {
  if (typeof value == 'object') {
    value = ''
  }
  post({
    url: 'org/baCompany/getFieldValue',
    data: { company_entity: value },
  }).then(({ code, data, message }: any) => {
    if (code == 200) {
      pageData.companyEntityList = data
    } else {
      Message.error({
        content: message,
        duration: 5000,
      })
    }
  })
}
//导出
const exports = () => {
  if (gridOption.value.getSelectedRows().length === 0) {
    Message.error('请先勾选')
    return
  } else {
    //将表头拼接出来
    let head =
      '<th>编制日期</th><th>物料编号</th><th>物料名称</th><th>采购单号</th><th>采购数量</th><th>单价</th><th>采购单位</th><th>换算比例</th><th>换算后数量</th><th>入库数量</th><th>主体单位</th><th>未入库数量</th><th>税号</th><th>采购公司</th><th>换算后单价</th><th>单位</th><th>交货日期</th><th>供应商</th><th>采购制单人</th><th>状态</th>'
    //拿到当前表格数据与勾选的行做筛选

    let nowRow = gridOption.value.getSelectedRows()
    let body = ''
    nowRow.forEach(function (o) {
      body += '<tr><td>' + (o['purchaseDate'] == undefined ? '' : o['purchaseDate']) + '</td>'
      body += '<td>' + (o['materialCode'] == undefined ? '' : o['materialCode']) + '</td>'
      body += '<td>' + (o['materialName'] == undefined ? '' : o['materialName']) + '</td>'
      body += '<td>' + (o['purchaseCode'] == undefined ? '' : o['purchaseCode']) + '</td>'
      body += '<td>' + (o['purchaseNum'] == undefined ? '' : o['purchaseNum']) + '</td>'
      body += '<td>' + (o['price'] == undefined ? '' : o['price']) + '</td>'
      body += '<td>' + (o['purchaseUnit'] == undefined ? '' : o['purchaseUnit']) + '</td>'
      body += '<td>' + (o['convertRate'] == undefined ? '' : o['convertRate']) + '</td>'
      body += '<td>' + (o['purchaseNumCon'] == undefined ? '' : o['purchaseNumCon']) + '</td>'
      body += '<td>' + (o['inStockNum'] == undefined ? '' : o['inStockNum']) + '</td>'
      body += '<td>' + (o['companyEntity'] == undefined ? '' : o['companyEntity']) + '</td>'
      body += '<td>' + (o['notInStockNum'] == undefined ? '' : o['notInStockNum']) + '</td>'
      body += '<td>' + (o['dutyParagraph'] == undefined ? '' : o['dutyParagraph']) + '</td>'
      body += '<td>' + (o['useCompanyName'] == undefined ? '' : o['useCompanyName']) + '</td>'
      body += '<td>' + (o['price'] == undefined ? '' : o['price']) + '</td>'
      body += '<td>' + (o['unit'] == undefined ? '' : o['unit']) + '</td>'
      body += '<td>' + (o['planDeliveryDate'] == undefined ? '' : o['planDeliveryDate']) + '</td>'
      body += '<td>' + (o['providerName'] == undefined ? '' : o['providerName']) + '</td>'
      body += '<td>' + (o['createName'] == undefined ? '' : o['createName']) + '</td>'
      body +=
        '<td>' +
        (o['infoState'] == 0 ? '未完成' : o['infoState'] == 1 ? '已完成' : '手工完成') +
        '</td>'
      body += '</tr>'
    })
    tableToXlsx(head, '采购单进度查询', body)
    console.log(table)
  }
}

function tableToXlsx(head: any, filename: any, body: any) {
  const uri = 'data:application/vnd.ms-excel;base64,',
    template = `<html>
            <head><meta charset="UTF-8"></head>
            <body><table border="1"><tr>${head}</tr>${body}</table></body>
        </html>`

  const a = document.createElement('a')
  a.href = uri + window.btoa(unescape(encodeURIComponent(template)))
  a.download = filename
  a.click()
  document.removeChild(a)
}
const handleClick = () => {
  let selsetionList = gridOption.value.getSelectedRows()
  if (selsetionList.length <= 0) {
    Message.warning('请勾选需要打印的数据！')
    return
  }
  printPdf(
    gridOption.value.getSelectedRows().map((o: any) => {
      return o['id']
    })
  )
}
//打印预览PDF
const printPdf = (e: any) => {
  post({
    url: 'qms/perchingAnomaly/printPerchingAnomaly',
    data: e,
    responseType: 'blob',
  }).then((res: any) => {
    let reader = new FileReader()
    reader.readAsDataURL(res)
    reader.onload = function () {
      let pdfBase64 = reader.result.replace('data:application/pdf;base64,', '')
      printJS({ printable: pdfBase64, type: 'pdf', base64: true })
    }
  })
}
const permissionStore = usePermission()

if (permissionStore.hasPermisson('cgdjdcx.cx')) {
  pageData.btnList.push('查询')
}

if (permissionStore.hasPermisson('cgdjdcx.dc')) {
  pageData.btnList.push('导出')
}

const { saveGridState: saveGridState01, updateGridState: updateGridState01 } =
  saveOrUpdateGridState01('PurchaseOrderProgressQuery-1', gridOption, colState, tc)
const onColumnMoved1 = () => {
  saveGridState01()
}
const onColumnResized1 = () => {
  saveGridState01()
}
const gridOptionsz111 = ref()
const gridReadysz111 = (params: any) => {
  gridOptionsz111.value = params.api
}
const tqDataList = ref([])
const tableColumns3 = useTableColumn([
  {
    title: '采购公司',
    key: 'useCompanys',
    dataIndex: 'useCompanys',
    width: 150,
  },
  {
    title: '采购部门',
    key: 'useDepartment',
    dataIndex: 'useDepartment',
    width: 150,
  },
  {
    title: '物料大类',
    key: 'bigClassName',
    dataIndex: 'bigClassName',
    width: 150,
  },
  {
    title: '物料中类',
    key: 'middleClassName',
    dataIndex: 'middleClassName',
    width: 150,
  },
  {
    title: '物料小类',
    key: 'subClassName',
    dataIndex: 'subClassName',
    width: 150,
  },
  {
    title: '物料编号',
    key: 'materialCode',
    dataIndex: 'materialCode',
    width: 150,
  },
  {
    title: '物料名称',
    key: 'materialName',
    dataIndex: 'materialName',
    width: 150,
  },
  {
    title: '规格',
    key: 'specName',
    dataIndex: 'specName',
    width: 150,
  },
  {
    title: '申购数量',
    key: 'applyNum',
    dataIndex: 'applyNum',
    width: 150,
  },
  {
    title: '库存数量',
    key: 'stockNum',
    dataIndex: 'stockNum',
    // slotName: 'stockNum',
    width: 150,
  },
  {
    title: '单位',
    key: 'unit',
    dataIndex: 'unit',
    width: 150,
  },
  {
    title: '品牌',
    key: 'brandName',
    dataIndex: 'brandName',
    width: 150,
  },
  {
    title: '采购数量',
    key: 'purchaseNum',
    dataIndex: 'purchaseNum',
    slotName: 'purchaseNum',
    width: 150,
  },
  {
    title: '采购单位',
    key: 'purchaseUnit',
    dataIndex: 'purchaseUnit',
    width: 150,
  },
  {
    title: '不含税单价',
    key: 'price',
    dataIndex: 'price',
    slotName: 'price',
    width: 150,
  },
  {
    title: '不含税金额',
    key: 'amount',
    dataIndex: 'amount',
    slotName: 'amount',
    width: 150,
  },
  {
    title: '税率',
    key: 'taxRate',
    dataIndex: 'taxRate',
    slotName: 'taxRate',
    width: 150,
  },
  {
    title: '含税单价',
    key: 'taxPrice',
    dataIndex: 'taxPrice',
    slotName: 'taxPrice',
    width: 150,
  },
  {
    title: '含税金额',
    key: 'taxTotalPrice',
    dataIndex: 'taxTotalPrice',
    slotName: 'taxTotalPrice',
    width: 150,
  },
  {
    title: '转化比例',
    key: 'convertRate',
    dataIndex: 'convertRate',
    width: 150,
  },
  {
    title: '所属区域',
    key: 'district',
    dataIndex: 'district',
    width: 150,
    slotName: 'district',
  },
  {
    title: '位置号',
    key: 'locationMark',
    dataIndex: 'locationMark',
    width: 150,
    slotName: 'locationMark',
  },
  {
    title: '收货公司',
    key: 'deliveryCompany',
    dataIndex: 'deliveryCompany',
    width: 150,
    slotName: 'deliveryCompany',
  },
  {
    title: '收货人',
    key: 'receiver',
    dataIndex: 'receiver',
    width: 150,
    slotName: 'receiver',
  },
  {
    title: '收货地址',
    key: 'deliveryAddress',
    dataIndex: 'deliveryAddress',
    width: 150,
    slotName: 'deliveryAddress',
  },
  {
    title: '是否固资',
    key: 'fixAssetStatus',
    dataIndex: 'fixAssetStatus',
    width: 150,
    slotName: 'fixAssetStatus',
  },
  {
    title: '备注',
    key: 'remark',
    dataIndex: 'remark',
    slotName: 'remark',
    width: 150,
  },
  // {
  //   title: '操作',
  //   key: 'act',
  //   dataIndex: 'act',
  //   slotName: 'act',
  //   width: 80,
  // },
])
let tcsz111: any[] = tableColumns3.map((o) => {
  let obj = {
    headerName: o.title,
    field: o.key,
    pinned: o['fixed'],
    tooltipField: o.key,
  }
  if (o.slotName === 'fixAssetStatus') {
    obj['resizable'] = false

    obj['sortable'] = false
    obj['cellRenderer'] = {
      template: `
          
          <el-tag type="warning" class="gesture">{{ isDtas.fixAssetStatus == 0 ? '否' : '是' }}</el-tag>
                    `,
      setup(props: any) {
        const isDtas = ref(props.params.data)
        return {
          isDtas,
        }
      },
    }
    obj['filterParams'] = {
      valueFormatter: function (params: any) {
        return params.value == '0'
          ? '否'
          : params.value == '1'
            ? '是'
            : ''
      },
    }
  }
  return obj
})

let asz111 = [
  {
    showRowGroup: 'hide_def',
    headerName: '',
    checkboxSelection: true,
    headerCheckboxSelection: true,
    pinned: 'left',
    width: 50,
    resizable: false,
    filter: false,
    sortable: false,
    minWidth: 50,
    maxWidth: 50,
    lockPosition: 'left',
  },
]
tcsz111 = asz111.concat(tcsz111)
const visibles1 = ref(false)
const isOk1 = () => {
  post({
    url: 'purchase/PurchaseOrder/updateList',
    data: {
      ...dataForm,
      purchaseOrderDetail: tqDataList.value,
    },
  }).then((res: any) => {
    if (res.code === 200) {
      doRefresh()
      Message.success({
        content: '修改成功!',
        duration: 5000,
      })
      visibles1.value = false
    } else {
      Message.error({
        content: res.message,
        duration: 5000,
      })
    }
  })
}
const Details = (val: any) => {
  post({
    url: 'purchase/PurchaseOrderDetail/getList',
    data: {
      purchaseOrderId: val,
      rejectState: 0,
    },
  }).then(({ data, code }: any) => {
    if (code === 200) {
      data.forEach(item => {
        if (item.fixAssetStatus === undefined) {
          item.fixAssetStatus = 1
        }
      })
      tqDataList.value = data
      gridOptionsz111.value.setRowData(data)
    } else {
      Message.error({
        content: '查询失败！',
        duration: 5000,
      })
    }
  })
}
</script>
  
<style lang="less" scoped>
.xqdxx {
  display: flex;
}

.isTable {
  margin-top: 100px;
  width: 90%;
  margin: 0 auto;
  border: 1.2px solid #ccc;
  text-align: center;
  border-collapse: collapse;

  td {
    border: 1.2px solid #ccc;
  }

  th {
    border: 1.2px solid #ccc;
  }
}

#dys {
  display: flex;
  width: 90%;
  margin: 0 auto;
  justify-content: space-between;
  font-weight: 1000;

  div {
    width: 200px;
  }
}

:deep(.arco-table-td-content) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>